<template>
  <div class="wrap">
    <el-row class="panel-group">
      <el-col :span="12" class="column" style="display: flex">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>CPU</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <div class="content-box">
            <el-progress type="circle" :percentage="25"></el-progress>
            <div class="info-box">
              <h2>CPU信息</h2>
              <el-form :model="form" label-position="left" label-width="80px">
                <el-form-item label="-使用率">
                  <div><span>39</span>%</div>
                </el-form-item>
                <el-form-item label="-频率">
                  <div><span>39</span>%</div>
                </el-form-item>
                <el-form-item label="-运行时间">
                  <div>
                    <span>0</span>:
                    <span>39</span>:
                    <span>39</span>:
                    <span>39</span>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>

        </el-card>
      </el-col>

      <el-col :span="12" class="column" style="display: flex">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>CPU</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <div class="content-box">
            <el-progress type="circle" :percentage="25"></el-progress>
            <div class="info-box">
              <h2>内存信息</h2>
              <el-form :model="form" label-position="left" label-width="80px">
                <el-form-item label="-使用率">
                  <div><span>39</span>%</div>
                </el-form-item>
                <el-form-item label="-总数">
                  <div>8091</div>
                </el-form-item>
                <el-form-item label="-可用">
                  <div>
                    1022
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>

        </el-card>
      </el-col>

      <el-col :xs="24" :lg="12" class="column">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>网络</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <area-chart></area-chart>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import AreaChart from './components/AreaChart'
  export default {
    data(){
      return {
        form: {}
      }
    },
    components: {
      'area-chart': AreaChart
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .wrap{
    position: relative;
    .panel-group{
      .column{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 20px;
        .box-card{
          position: relative;
          width: 90%;
        }
        .content-box{
          display: flex;
          align-items: center;
        }
        .el-progress{
          margin-right: 30px;
        }
        .el-form-item{
          margin-bottom: 0;
        }
      }
    }
  }

</style>
